<template>
    <el-dropdown-item icon="el-icon-question" @click.native="dialogVisible = true">提交反馈
        <el-dialog title="反馈" :visible.sync="dialogVisible" append-to-body height="100%" :close-on-click-modal="false">
            <el-form ref="form" :model="form" :rules="rules">
                <el-form-item label="反馈类型" prop="type">
                    <el-radio-group v-model="form.type">
                        <el-radio :label="0" border>困惑与建议</el-radio>
                        <el-radio :label="1" border>Bug缺陷</el-radio>
                        <el-radio :label="2" border>申诉</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="功能模块" prop="function">
                    <el-select v-model="form.functionId" placeholder="功能模块">
                        <el-option v-for="item in this.function" :key="item.id" :label="item.functionName"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="标题" prop="title">
                    <el-input v-model="form.title" placeholder="请输入标题" prefix-icon="el-icon-edit"></el-input>
                </el-form-item>
                <el-form-item label="描述" prop="content">
                    <el-input v-model="form.content" type="textarea" placeholder="请输入内容"
                        prefix-icon="el-icon-edit"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="edit">提 交</el-button>
            </span>
        </el-dialog>
    </el-dropdown-item>
</template>
<script>
import Cookies from "js-cookie";
import { submitFeedback } from "@/api/system/feedback";
import { getAllFunctions } from "@/api/system/function";

export default {
    name: "FeedBack",
    data() {
        const validateCheckType = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请选择反馈类型'))
            } else {
                callback()
            }
        }
        const validateCheckFunction = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请选择功能模块'))
            } else {
                callback()
            }
        }
        const validateCheckTitle = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入标题'))
            } else {
                callback()
            }
        }
        const validateCheckcontent = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入内容'))
            } else {
                callback()
            }
        }
        return {
            dialogVisible: false,
            user: {},
            form: {},
            type: ['困惑与建议', 'Bug缺陷', '申诉'],
            function: [],
            rules: {
                type: [{ required: true, trigger: 'blur', validator: validateCheckType }],
                function: [{ required: true, trigger: 'blur', validator: validateCheckFunction }],
                title: [{ required: true, trigger: 'blur', validator: validateCheckTitle }],
                content: [{ required: true, trigger: 'blur', validator: validateCheckcontent }]
            }
        }
    },
    methods: {
        edit() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    submitFeedback({
                        userId: this.form.userId,
                        functionId: this.form.functionId,
                        title: this.form.title,
                        content: this.form.content,
                        type: this.form.type
                    }).then(res => {
                        if (res.data.code === 200) {
                            this.dialogVisible = false
                            this.$message.success(res.data.message)
                        } else {
                            // this.$message.error(res.data.message)
                            // console.log(this.form.content)
                        }
                    })
                }
            })
        },
        getFunction() {
          getAllFunctions().then(res => {
                this.function = res.data.functionInfoList
            })
        }
    },
    created() {
        this.user = JSON.parse(Cookies.get("user"))
        this.form = {
            userId: this.user.id,
            functionId: '',
            title: '',
            content: '',
            type: 0
        }
        this.getFunction()
    },

}


</script>
